<template>
  <div class="order-item" v-show="order.sn">
    <!-- 订单号 -->
    <p class="sn">订单号:{{ order.sn }}</p>
    <!-- 门票状态 -->
    <span v-if="order.status == ORDER_STATUS_TYPE.WAIT" class="text-warning order-state"
      >待支付</span
    >
    <span v-if="order.status == ORDER_STATUS_TYPE.FINISH" class="text-warning order-state"
      >已完成</span
    >
    <span v-if="order.status == ORDER_STATUS_TYPE.CANCELED" class="text-warning order-state"
      >已取消</span
    >
    <!-- 门票图片 -->
    <div class="order-info">
      <div class="left">
        <img :src="order.item.flash_img" alt="" />
      </div>
      <!-- 门票标题 -->
      <div class="right">
        <p class="title">{{ order.item.flash_name }}</p>
      </div>
    </div>
    <!-- 门票数量及订单价格 -->
    <p class="price">总共{{ order.buy_count }}件商品 合计￥{{ order.buy_amount }}</p>

    <!-- 订单操作 -->
    <div class="order-opt">
      <van-button
        color="#7232dd"
        plain
        round
        v-if="order.status == ORDER_STATUS_TYPE.WAIT"
        :to="{ name: 'orderPayPage', params: { sn: order.sn } }"
        >去支付</van-button
      >
      <van-button
        color="#7232dd"
        plain
        round
        v-if="order.status != ORDER_STATUS_TYPE.WAIT"
        @click="delOrder"
        >删除订单</van-button
      >
      <van-button
        color="#7232dd"
        plain
        round
        :to="{ name: 'orderDetailPage', params: { sn: this.order.sn } }"
        >查看</van-button
      >
    </div>
  </div>
</template>
  
<script>
import { ORDER_STATUS_TYPE } from '@/utils/constants'
import { showConfirmDialog, showNotify } from 'vant'
import { ajax } from '@/utils/ajax'
import { OrderApis } from '@/utils/apis'
export default {
  // 订单数据
  props: ['order'],
  data() {
    return {}
  },
  methods: {
    // 删除订单.
    delOrder() {
      showConfirmDialog({
        title: '提示',
        message: '确定删除订单吗'
      })
        // 点击确认
        .then(() => {
          ajax.delete(`${OrderApis.orderDetailUrl}/${this.order.sn}`).then((res) => {
            console.log('delRes', res)
            if (res.status === 201) {
              showNotify({ type: 'success', message: '订单已删除' })
              this.order.sn = ''
            } else if (res.status === 200) {
              showNotify({ type: 'success', message: '请勿重复删除' })
            }
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  created() {
    // 拿到常量值
    this.ORDER_STATUS_TYPE = ORDER_STATUS_TYPE
  }
}
</script>

<style lang="less" scoped>
.order-item {
  position: relative;

  margin: 8px;
  padding: 10px;

  background-color: #fff;
  border-radius: 12px;

  //   订单编号
  .sn {
    margin: 0;
    margin-bottom: 8px;

    font-size: 15px;
  }

  //   订单状态
  .order-state {
    position: absolute;
    right: 14px;
    top: 10px;

    font-weight: 400;
  }

  //   订单信息
  .order-info {
    display: flex;
    flex-direction: row;

    // 门票图片
    img {
      width: 120px;
    }

    // 门票名字
    .title {
      margin: 10px;

      font-size: 18px;
    }
  }

  //   订单价格
  .price {
    margin: 10px;

    text-align: right;
    font-size: 16px;
  }

  //   操作按钮
  .order-opt {
    text-align: right;
    .van-button {
      height: 35px;
    }
    .van-button:nth-child(2) {
      width: 80px;
    }
  }
}
</style>